<!--
 * @Author: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @Date: 2025-05-25 17:51:39
 * @LastEditors: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @LastEditTime: 2025-06-02 11:21:19
 * @FilePath: \iam-ui\src\views\disciplinary\workOrder\components\AssetDrawer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <common-drawer
    :visible="visible"
    :title="drawerTitle"
    :size="800"
    :destroy-on-close="true"
    @update:visible="emit('update:visible', $event)"
    @close="handleClose"
  >
    <div class="order-detail">
      <!-- <div class="order-detail-title">工单详情</div> -->
      <el-row :gutter="20" class="order-detail-row">
        <el-col :span="12">
          <span class="label">工单来源：</span>
          <span class="value">{{ assetData?.source || "-" }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">工单编号：</span>
          <span class="value">{{ assetData?.workOrderNumber || "-" }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="order-detail-row">
        <el-col :span="24">
          <span class="label">工单主题：</span>
          <span class="value">{{ assetData?.workOrderSubject || "-" }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="order-detail-row">
        <el-col :span="12">
          <span class="label">办理期限：</span>
          <span class="value">{{ assetData?.handlingDeadline || "-" }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">签收日期：</span>
          <span class="value">{{ assetData?.receiptDate || "-" }}</span>
        </el-col>
      </el-row>

      <div class="order-detail-section-module" v-if="isShowAi">
        <div class="order-detail-section-header">
          <span>AI分析</span>
          <el-button
            link
            size="small"
            class="collapse-btn"
            @click="aiCollapse = !aiCollapse"
          >
            <el-icon v-if="aiCollapse"><ArrowDown /></el-icon>
            <el-icon v-else><ArrowUp /></el-icon>
            {{ aiCollapse ? "展开" : "收起" }}
          </el-button>
        </div>
        <div v-show="!aiCollapse" class="order-detail-section-content">
          <el-row :gutter="20" class="order-detail-row">
            <el-col :span="24">
              <span class="label">建议处理科室：</span>
              <span class="value">{{
                (assetData?.departmentName || "-").replace(/\|+$/, "")
              }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="order-detail-row">
            <el-col :span="24">
              <span class="label">建议回复内容：</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="order-detail-row">
            <el-col :span="24">
              <el-input
                :model-value="assetData?.replyContent || ''"
                type="textarea"
                :rows="6"
                readonly
                class="readonly-textarea"
              />
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="order-detail-section-module">
        <div class="order-detail-section-header">
          <span>联系方式</span>
          <el-button
            link
            size="small"
            class="collapse-btn"
            @click="contactCollapse = !contactCollapse"
          >
            <el-icon v-if="contactCollapse"><ArrowDown /></el-icon>
            <el-icon v-else><ArrowUp /></el-icon>
            {{ contactCollapse ? "展开" : "收起" }}
          </el-button>
        </div>

        <el-row
          :gutter="20"
          class="order-detail-row"
          style="padding: 16px"
          v-show="!contactCollapse"
        >
          <el-col :span="12">
            <span class="label">联系人：</span>
            <span class="value">{{ assetData?.username || "-" }}</span>
          </el-col>

          <el-col :span="12">
            <span class="label">联系方式：</span>
            <span class="value">{{ assetData?.phone || "-" }}</span>
          </el-col>

          <el-col :span="24">
            <span class="label">地址：</span>
            <span class="value">{{ assetData?.address || "-" }}</span>
          </el-col>
        </el-row>
      </div>

      <div class="order-detail-section-module">
        <div class="order-detail-section-header">
          <span>详细信息</span>
          <el-button
            link
            size="small"
            class="collapse-btn"
            @click="detailCollapse = !detailCollapse"
          >
            <el-icon v-if="detailCollapse"><ArrowDown /></el-icon>
            <el-icon v-else><ArrowUp /></el-icon>
            {{ detailCollapse ? "展开" : "收起" }}
          </el-button>
        </div>
        <div v-show="!detailCollapse" class="order-detail-section-content">
          <el-row :gutter="20" class="order-detail-row">
            <el-col :span="12">
              <span class="label">诉求分类（一级）：</span>
              <span class="value">{{
                assetData?.complaintCategoryLevel1 || "-"
              }}</span>
            </el-col>
            <el-col :span="12">
              <span class="label">诉求分类（二级）：</span>
              <span class="value">{{
                assetData?.complaintCategoryLevel2 || "-"
              }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="order-detail-row">
            <el-col :span="12">
              <span class="label">诉求分类（三级）：</span>
              <span class="value">{{
                assetData?.complaintCategoryLevel3 || "-"
              }}</span>
            </el-col>
            <el-col :span="12">
              <span class="label">办理方式：</span>
              <span class="value">{{ assetData?.handlingMethod || "-" }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="order-detail-row">
            <el-col :span="12">
              <span class="label">交办顺序：</span>
              <span class="value">{{ assetData?.orderAssignment || "-" }}</span>
            </el-col>
            <el-col :span="12">
              <span class="label">性质：</span>
              <span class="value">{{ assetData?.complaintNature || "-" }}</span>
            </el-col>

            <el-col :span="24">
              <span class="label">工单内容：</span>
            </el-col>

            <el-col :span="24">
              <el-input
                :model-value="assetData?.workOrderContent || ''"
                type="textarea"
                :rows="6"
                readonly
                class="readonly-textarea"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </common-drawer>
</template>

<script setup>
import { ref } from "vue";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import CommonDrawer from "@/components/CommonDrawer.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  type: {
    type: String,
    required: true,
    validator: (value) => ["view", "reply"].includes(value),
  },
  assetData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  pageType: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:visible"]);
const aiCollapse = ref(false);
const detailCollapse = ref(false);
const contactCollapse = ref(false);

import useUserStore from "@/store/modules/user";

const userStore = useUserStore();

// 抽屉标题
const drawerTitle = computed(() => {
  const titles = {
    view: "工单详情",
    reply: "工单回复",
    supervise: "工单督办",
  };
  return titles[props.type] || "";
});
// 关闭抽屉
const handleClose = () => {
  emit("update:visible", false);
};

const isShowAi = computed(() => {
  console.log(userStore.roles, props.pageType);

  if (userStore.roles.includes("jd") && props.pageType === "督办工单")
    return false;

  if (userStore.roles.includes("jgw") && props.pageType === "督办工单")
    return false;

  if (userStore.roles.includes("department") && props.pageType === "纪工委工单")
    return false;

  return true;
});
</script>

<style lang="scss" scoped>
.order-detail {
  padding: 8px 8px 0 8px;
  &-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
  }
  &-section-module {
    margin-bottom: 16px;
  }
  &-section-header {
    background: #f6f7fa;
    border-radius: 6px 6px 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    .collapse-btn {
      margin-left: 8px;
      font-size: 13px;
      color: #666;
      vertical-align: middle;
      padding: 0;
    }
  }
  &-section-content {
    background: none;
    border-radius: 0 0 6px 6px;
    padding: 12px 16px 4px 16px;
  }
  &-row {
    margin-bottom: 8px;
  }
  .label {
    font-weight: bold;
    color: #444;
    margin-right: 4px;
  }
  .value {
    color: #333;
    word-break: break-all;
  }
  .readonly-textarea {
    width: 100%;
    margin-top: 4px;
  }
}
</style>
